<template>
  <div class="page order-details">
    <!-- 订单金额明细 -->
    <div class="order-modal" v-if="modalVisible">
      <div class="order-modal_content">
        <i class="zhk-alert_close" @click="modalVisible=false"></i>
        <ul class="order-list">
          <li v-for="(item,index) in data.yzTradeOrderGoodsRecordList" :key="index">
            <span>{{item.goodsName+' '+item.goodsCount}}份</span>
            <div class="text-black">{{item.goodsTotalAmount}}</div>
          </li>
        </ul>
      </div>
    </div>

    <div class="scroll-view">
      <!-- <customHeader v-if="(data.orderType==1||data.orderType==3||data.orderType==5)&&data.payType!=4&&data.tradeOrderExtModel['miniStoreValueType']!=1&&data.newOrderStatus ==1&&data.refundStatus !='1'&& data.refundStatus !='2' && data.refundStatus !='3'&&authRefund"
                    middleTitle="订单详情"
                    @leftCallBack="handleBack"
                    rightTitle="退款"
                    @rightCallBack="handleRefund" />
      <customHeader v-else middleTitle="订单详情"
      @leftCallBack="handleBack" />-->
      <customHeader
        v-if="data.isRefunded==0"
        middleTitle="订单详情"
        @leftCallBack="handleBack"
        rightTitle="退款"
        @rightCallBack="handleRefund"
      />
      <customHeader v-else middleTitle="订单详情" @leftCallBack="handleBack" />

      <div class="page-body" v-if="hasData">
        <v-loadmore
          :top-method="loadTop"
          :topDistance="50"
          :auto-fill="false"
          ref="loadmore"
          @top-status-change="handleTopChange"
          style="height:100%"
        >
          <!-- 退款模块 -->
          <div v-show="isRefundDetail">
            <div class="section">
              <!-- 头详情模块 -->
              <div class="total-get">
                <div>实退金额(元)</div>
                <p
                  class="status-orange"
                >{{ data.totalRefundAmount?CommonUtil.moneyFormate(data.totalRefundAmount,true):"0.00" }}</p>
              </div>
              <ul class="order-list">
                <li>
                  <span>订单状态</span>
                  <div>退款成功</div>
                </li>
                <li v-if="data.orderType !== 2">
                  <span>订单金额</span>
                  <span class="text-blue" v-if="data.orderType==1 && data.yzTradeOrderGoodsRecordList&&data.tradeOrderExtModel['miniStoreValueType']!=4" @click="modalVisible=true">明细</span>
                  <div>{{ CommonUtil.moneyFormate(data.totalAmount) }}</div>
                </li>
                <li v-if="data.tradeOrderExtModel&&data.refundList&&data.refundList.length">
                  <span>收银实退</span>
                  <div>{{data.refundList[0].reGetAmount?CommonUtil.moneyFormate(data.totalRefundAmount,true):"0.00"}}</div>
                </li>
                <li v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.joinMarketing===1">
                  <span>津贴实退</span>
                  <div>{{data.refundList.length&&data.refundList[0].encourageRefundAmount?CommonUtil.moneyFormate(data.refundList[0].encourageRefundAmount,true):"0.00"}}</div>
                </li>
                <!-- 微信/支付宝补贴实退 -->
                <li v-if="data.refundList&&data.refundList.length&&data.refundList[0].platformDiscountAmount-0">
                  <span>{{data.refundList[0].payTypeDesc}}营销补贴实退</span>
                  <div>{{CommonUtil.moneyFormate(data.refundList[0].platformDiscountAmount,true)}}</div>
                </li>
                <li v-if="data.refundList&&data.refundList.length&&data.refundList[0]['storeValueRefundAmount']">
                  <span>卡余额抵扣实退</span>
                  <div>{{ CommonUtil.moneyFormate(data.refundList[0].storeValueRefundAmount) }}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-for="(item,index) in data.refundList" :key="index">
              <ul class="order-list">
                <div >
                  <li>
                    <span>退款时间</span>
                    <div>{{ item.tradeTime }}</div>
                  </li>
                  <li>
                    <span>退款方式</span>
                    <div>{{payTypeFormate(data.payType)}}</div>
                  </li>
                  <li>
                    <span>退款金额</span>
                    <div>{{item.reAmount}}</div>
                  </li>
                  <li>
                    <span>退款门店</span>
                    <div>{{ data.shopName }}</div>
                  </li>
                  <li>
                    <span>退款流水</span>
                    <div>{{ item.tradeNo?item.tradeNo:"" }}</div>
                  </li>
                  <li>
                    <span>原收款号</span>
                    <div v-if="data.payType ==1||data.payType ==3">{{ data.bizNo }}</div>
                    <div v-else>{{ data.thirdTradeNo }}</div>
                  </li>
                  <li>
                    <span>操作人</span>
                    <div>{{ item.payeeName }}</div>
                  </li>

                  <li>
                    <span>退款原因</span>
                    <div>{{ item.refundReason }}</div>
                  </li>
                </div>
              </ul>
            </div>
            <div class="section-title" @click="handleToggle">
              <span>原收款详情</span>
              <div>
                <i class="zhk-list_rarrow"></i>
              </div>
            </div>
          </div>
          <!-- 收款模块 -->
          <div v-show="!isRefundDetail">
            <div class="section">
              <!-- 头详情模块 -->
              <div class="total-get">
                <div>{{data.orderType==6?"顾客实付(元)":"实收金额(元)"}}</div>
                <p>
                  <!-- :class="{'through-line':data.refundList&&data.refundList.length !==0}" -->
                  <span
                  >{{ data.supplierReceiveAmount?data.supplierReceiveAmount.toFixed(2):"0.00" }}</span>
                </p>
                <div class="chuzhi" v-if="data.tradeOrderExtModel['miniStoreValueType']==1">储值订单</div>
                <div class="chuzhi" v-if="data.tradeOrderExtModel['miniStoreValueType']==4">商品订单</div>
                <div class="status-orange" v-if="data.refundList&&data.refundList.length !==0">{{ data.refundStatusDesc }}</div>
              </div>
              <ul class="order-list">
                <li>
                  <span>订单状态</span>
                  <div v-if="data.tradeOrderExtModel['miniStoreValueType']==4">
                      {{goodsOrderStatus(data['bizStatus'])}}
                  </div>
                  <div v-else>
                    <div v-if="data.newOrderStatus ==1">
                      <div class="status-blue">收款成功</div>
                    </div>
                    <div v-else-if="data.newOrderStatus == 2">
                      <div class="status-orange">{{ data.refundStatusDesc }}</div>
                    </div>
                    <div v-else-if="data.newOrderStatus == 3">退款中</div>
                    <div v-else-if="data.newOrderStatus == 4">撤销中</div>
                    <div v-else-if="data.newOrderStatus == 5">已撤销</div>
                    <div v-else-if="data.newOrderStatus == 6">
                      <div class="status-blue">外卖已完成</div>
                    </div>
                    <div v-else-if="data.newOrderStatus == 7">
                      <div class="status-orange">外卖已退款</div>
                    </div>
                    <div v-else-if="data.newOrderStatus == 8">预约点餐已取餐</div>
                    <div v-else-if="data.newOrderStatus == 9">预约点餐已退款</div>
                    <div v-else-if="data.newOrderStatus == 10">预约点餐待制作</div>
                    <div v-else-if="data.newOrderStatus == 11">预约点餐待取餐</div>
                    <div v-else-if="data.newOrderStatus == 12">收款失败</div>
                    <div v-else-if="data.newOrderStatus == 13">
                      <div class="status-red">收款异常</div>
                    </div>
                    <div v-else-if="data.newOrderStatus == 14">已关闭</div>
                    <div v-else>未知({{ data.newOrderStatus }})</div>
                  </div>
                </li>
                <li v-if="data.orderType !== 2">
                  <span>订单金额</span>
                  <span class="text-blue" v-if="data.orderType==1 && data.yzTradeOrderGoodsRecordList&&data.tradeOrderExtModel['miniStoreValueType']!=4" @click="modalVisible=true">明细</span>
                  <div>{{ CommonUtil.moneyFormate(data.totalAmount) }}</div>
                </li>
                <!-- <template v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.joinMarketing===1"> -->
                <template>
                  <li v-if="data.totalPayAmount">
                    <span>收银实收</span>
                    <div>{{ CommonUtil.moneyFormate(data.totalPayAmount) }}</div>
                  </li>
                  <li v-if="data.totalRefundAmount">
                    <span>实退金额</span>
                    <div>{{ CommonUtil.moneyFormate(data.totalRefundAmount) }}</div>
                  </li>
                  <li v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.joinMarketing===1&&data.tradeOrderExtModel.encourageDeductionAmount">
                    <span>津贴实收</span>
                    <div>{{ CommonUtil.moneyFormate(data.tradeOrderExtModel.encourageDeductionAmount) }}</div>
                  </li>
                  <!-- 微信/支付宝补贴 -->
                  <li v-if="data.platformDiscountAmount&&data.platformDiscountAmount-0">
                    <span>{{data.payTypeDesc}}营销补贴</span>
                    <div>{{CommonUtil.moneyFormate(data.platformDiscountAmount)}}</div>
                  </li>
                </template>
                <li
                  v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.storeValueDeductionAmount"
                >
                  <span>卡余额抵扣</span>
                  <div>{{ CommonUtil.moneyFormate(data.tradeOrderExtModel.storeValueDeductionAmount,true) }}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 11"
                >
                  <span>餐盒费</span>
                  <div>{{ CommonUtil.moneyFormate(data.packingAmount) }}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 7&&data.orderType !== 11"
                >
                  <span>配送费</span>
                  <div>{{ CommonUtil.moneyFormate(data.totalPayAmount) }}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 11"
                >
                  <span>服务费</span>
                  <div>{{ CommonUtil.moneyFormate(data.serviceAmount) }}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 11"
                >
                  <span>其他费用</span>
                  <div>{{ CommonUtil.moneyFormate(data.otherAmount) }}</div>
                </li>
                <li
                  v-if="((data.orderType == 1 || data.orderType == 11)&&data.cancellationAmount>0)&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 7"
                >
                  <span>商品券抵扣</span>
                  <div>{{ CommonUtil.moneyFormate(data.cancellationAmount)}}</div>
                </li>
                <li v-if="data.newDiscountAmount && data.orderType!==2">
                  <span>优惠金额</span>
                  <!-- <div>{{CommonUtil.moneyFormate(data.discountAmount,true)}}</div> -->
                  <div>{{CommonUtil.moneyFormate(data.newDiscountAmount,true)}}</div>
                </li>
                <li v-if="data.orderType !== 2&&data.orderType !== 6&&data.orderType !== 7&&data.tradeOrderExtModel['miniStoreValueType']!==4">
                  <span>抹零金额</span>
                  <div>{{ CommonUtil.moneyFormate(data.molingAmount,true)}}</div>
                </li>
              </ul>
              <ul
                class="order-list"
                :class="{'border-top':data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 4&&data.orderType !== 6&&data.orderType !== 11}"
              >
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 4&&data.orderType !== 6&&data.orderType !== 7&&data.orderType !== 11"
                >
                  <span>桌号</span>
                  <div>{{ data.tableNum?data.tableNum:"--"}}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 4&&data.orderType !== 6&&data.orderType !== 11"
                >
                  <span>取餐号</span>
                  <div>{{ data.takeFoodNum?data.takeFoodNum:"--"}}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="!((data.orderType ==1 || data.orderType ==11)&&data.cancellationAmount<=0)">
              <div class="title" v-if="(data.orderType ==1 || data.orderType ==11)&&data.cancellationAmount>0">商品核销明细</div>
              <div class="title" v-else-if="data.orderType ==2">储值明细</div>
              <div class="title" v-else-if="data.orderType ==3">点餐订单明细</div>
              <div class="title" v-else-if="data.orderType ==4">桌边付明细</div>
              <div class="title" v-else-if="data.orderType ==5">POS点餐明细</div>
              <div class="title" v-else-if="data.orderType ==6">外卖明细</div>
              <div class="title" v-else-if="data.orderType ==7">预约点餐明细</div>
              <!-- <div class="title" v-else>{{data.orderType}}</div> -->

              <ul id="xmg_sy" class="three-colo">
                <div v-if="data.orderType !== 1&&data.orderType !== 11" class="sub-title">
                  <i class="zhk-homepage_dd"></i>
                  <span v-if="data.orderType ==2">储值</span>
                  <span v-else-if="data.orderType ==3">点菜单</span>
                  <span v-else-if="data.orderType ==4">点菜单</span>
                  <span v-else-if="data.orderType ==5">点菜单</span>
                  <span v-else-if="data.orderType ==6">点菜单</span>
                  <span v-else-if="data.orderType ==7">点菜单</span>
                  <span v-else>{{data.orderType}}</span>
                </div>
                <li v-for="(item,index) in data.goodsDetailList" :key="index">
                  <span class="name">
                    {{item.goodsName}}
                    <div v-if="data.orderType == 7" class="attr">{{item.remark}}</div>
                    <div v-else class="attr">
                      {{item.specName}}
                      {{item.specPropertyName}}
                    </div>
                  </span>
                  <span v-if="data.orderType == 7" class="count">x{{item.dishNum}}</span>
                  <span v-else-if="data.orderType == 4" class="count">x{{item.dishNum}}</span>
                  <span v-else-if="data.orderType == 1 || data.orderType == 11" class="count">x{{item.num}}</span>
                  <span v-else class="count">x{{item.goodsCopies}}</span>
                  <span class="total-money">
                    <span>{{CommonUtil.moneyFormate(item.goodsPayPrice)}}</span>
                  </span>
                </li>
              </ul>
              <!-- 储值详情 -->
              <ul
                v-if="data.orderType !== 1&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 7&&data.orderType !== 11"
                class="order-list"
              >
                <div v-for="(item,index) in data.goodsDetailList" :key="index">
                  <li id="xmg_hukh">
                    <span>会员卡号</span>
                    <div>{{item.cardAccountText}}</div>
                  </li>
                  <li>
                    <span id="xmg_czje">储值金额</span>
                    <div>{{ CommonUtil.moneyFormate(data.totalAmount) }}</div>
                  </li>
                  <li>
                    <span id="xmg_zsje">赠送金额</span>
                    <div>{{ CommonUtil.moneyFormate(item.donateAmount) }}</div>
                  </li>
                  <li>
                    <span id="xmg_knye">充值后卡内余额</span>
                    <div>{{ CommonUtil.moneyFormate(item.tradeAfterAmount) }}</div>
                  </li>
                </div>
              </ul>
              <!-- 外卖详情 -->
              <ul
                v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 7&&data.orderType !== 11"
                class="order-list"
              >
                <li v-if="data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5">
                  <span>收货人</span>
                  <div>{{data.recipientName}}</div>
                </li>
                <li>
                  <span v-if="data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5">联系电话</span>
                  <div>{{data.recipientPhone}}</div>
                </li>
                <li>
                  <span id="xmg_bz">备注</span>
                  <div>{{data.remark}}</div>
                </li>
              </ul>
              <!-- 预约点餐 -->
              <ul
                v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 11"
                class="order-list"
              >
                <li id="xmg_jcrs">
                  <span>就餐人数</span>
                  <div>{{data.personNum}}</div>
                </li>
                <li>
                  <span id="xmg_jcfs">就餐方式</span>
                  <div v-if="data.dinnerType ==1">堂食</div>
                  <div v-else-if="data.dinnerType == 2">打包</div>
                  <div v-else>{{ data.dinnerType }}</div>
                </li>
                <li>
                  <span id="xmg_jcsj">就餐时间</span>
                  <div>{{data.serviceBeginText}}</div>
                </li>
                <li>
                  <span id="xmg_yylxdh">联系电话</span>
                  <div>{{data.memberMobile}}</div>
                </li>
                <li v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 7&&data.orderType !== 11">
                  <span id="xmg_yybz">备注</span>
                  <div>{{data.remark}}</div>
                </li>
              </ul>
            </div>
            <div class="section">
              <div class="title">订单详情</div>
              <ul class="order-list">
                <li>
                  <span>订单编号</span>
                  <div @click="doCopyOrderId">{{ data.orderId }}</div>
                </li>
                <li
                  v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 5&&data.orderType !== 6&&data.orderType !== 7&&data.orderType !== 11"
                >
                  <span>餐饮系统订单编号</span>
                  <div>{{ data.billNo }}</div>
                </li>
                <li v-if="data.bizNo||data.thirdTradeNo">
                  <span>交易流水号</span>
                  <div v-if="data.payType ==1||data.payType ==3" @click="doCopyBizNo">{{ data.bizNo }}</div>
                  <div v-else @click="doCopyThirdTradeNo">{{ data.thirdTradeNo }}</div>
                </li>

                <li>
                  <span>订单类型</span>
                  <div v-if="data.orderType ==1">收银</div>
                  <div v-else-if="data.orderType == 2">储值</div>
                  <div v-else-if="data.orderType == 3">点餐</div>
                  <div v-else-if="data.orderType == 4">桌边付</div>
                  <div v-else-if="data.orderType == 5">POS点餐</div>
                  <div v-else-if="data.orderType == 6">外卖</div>
                  <div v-else-if="data.orderType == 7">预约点餐</div>
                  <div v-else-if="data.orderType == 11">预授权</div>
                  <div v-else>{{ data.orderType }}</div>
                </li>
                <li>
                  <span>收款方式</span>
                  <div>{{payTypeFormate(data.payType)}}</div>
                </li>
                <li>
                  <span>交易类型</span>
                  <div>{{data.businessDesc}}</div>
                </li>
                <li>
                  <span>交易时间</span>
                  <div>{{ data.createTimeText }}</div>
                </li>
                <li>
                  <span>交易门店</span>
                  <div>{{ data.shopName }}</div>
                </li>
                <template v-if="data.tradeOrderExtModel['miniStoreValueType']==4&&data['yzTradeOrderGoodsRecordList']&&data.yzTradeOrderGoodsRecordList.length>0">
                <li>
                  <span>交易商品</span>
                  <div>{{ data.yzTradeOrderGoodsRecordList[0].goodsName }}</div>
                </li>
                <li>
                  <span>商品份数</span>
                  <div>{{ data.yzTradeOrderGoodsRecordList[0].goodsCount }}</div>
                </li>
                <li>
                  <span>商品售价</span>
                  <div>{{ data.yzTradeOrderGoodsRecordList[0].goodsPrice }}</div>
                </li>
                </template>
                <li v-if="data.orderType !== 7&&data.tradeOrderExtModel['miniStoreValueType']!==4">
                  <span>收银员</span>
                  <div>{{ data.operatorName }}</div>
                </li>
                <li>
                  <span>订单来源</span>
                  <!-- <div v-if="data.orderPlatformSource ==1">云平台</div>
                  <div v-else-if="data.orderPlatformSource == 2">手持POS</div>
                  <div v-else-if="data.orderPlatformSource == 3">商家APP</div>
                  <div v-else-if="data.orderPlatformSource == 4">收银软件</div>
                  <div v-else-if="data.orderPlatformSource == 5">快享付码</div>
                  <div v-else-if="data.orderPlatformSource == 6">扫码点餐</div>
                  <div v-else-if="data.orderPlatformSource == 7">桌边付</div>
                  <div v-else-if="data.orderPlatformSource == 8">智慧盒子</div>
                  <div v-else-if="data.orderPlatformSource == 9">饿了么外卖</div>
                  <div v-else-if="data.orderPlatformSource == 10">美团外卖</div>
                  <div v-else-if="data.orderPlatformSource == 11">其他外卖平台</div>
                  <div v-else-if="data.orderPlatformSource == 12">口碑预约点餐</div>
                  <div v-else-if="data.orderPlatformSource == 13">小程序码</div>
                  <div v-else-if="data.orderPlatformSource == 14">快小盒</div>
                  <div v-else-if="data.orderPlatformSource == 15">码卡龙</div>
                  <div v-else-if="data.orderPlatformSource == 16">商家小程序</div>
                  <div v-else>{{ data.orderPlatformSource }}</div> -->
                  <div>{{data.orderPlatformSourceDesc}}</div>
                </li>
                <li v-if="data.tradeOrderExtModel['miniStoreValueType']!==4">
                  <span>SN号/码ID</span>
                  <div>{{ data.detailModelMap[0]&&data.detailModelMap[0]['extension7']}}</div>
                </li>
                <li>
                  <span>发票状态</span>
                  <div v-if="data.invoiceStatus ==1">未开票</div>
                  <div v-else-if="data.invoiceStatus == 2">蓝票开票中</div>
                  <div v-else-if="data.invoiceStatus == 3">开蓝票失败</div>
                  <div v-else-if="data.invoiceStatus == 4">红票开票中</div>
                  <div v-else-if="data.invoiceStatus == 5">开红票失败</div>
                  <div v-else-if="data.invoiceStatus == 6">已开红票</div>
                  <div v-else>未开票</div>
                </li>
                <li>
                  <span>是否分账</span>
                  <div v-if="data.tradeOrderExtModel.extension31 == '0'">否</div>
                  <div v-else-if="data.tradeOrderExtModel.extension31 == '1'">是</div>
                </li>
                <li v-if="data.remark&&data.orderType !== 6&&data.orderType !== 7">
                  <span id="xmg_bz">备注</span>
                  <div>{{data.remark}}</div>
                </li>
              </ul>
            </div>
            <div
              class="section"
              v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 5&&(data.hasInvoiced !== 0&& data.orderType == 6)&&data.orderType !== 7&&data.orderType !== 11"
            >
              <div class="title fold">
                发票信息
                <i class="zhk-list_rarrow"></i>
              </div>
              <ul class="order-list">
                <li>
                  <span>发票抬头</span>
                  <div>{{data.invoiceTitle}}</div>
                </li>
                <li>
                  <span>纳税识别号</span>
                  <div>{{data.taxpayerId}}</div>
                </li>
              </ul>
            </div>
            <div
              class="section"
              id="xmg_psxx"
              v-if="data.orderType !== 1&&data.orderType !== 2&&data.orderType !== 3&&data.orderType !== 4&& data.orderType !== 5&&data.orderType !== 7&&data.orderType !== 11"
            >
              <div class="title fold" @click="handleClickTitle">
                配送信息
                <i class="zhk-list_rarrow"></i>
              </div>
              <ul class="order-list">
                <li>
                  <span>配送方式</span>
                  <div v-if="data.logisticsCode ==1">商家自配送</div>
                  <div v-else-if="data.logisticsCode == 2">蓝票开票中</div>
                  <div v-else-if="data.logisticsCode == 3">外卖平台专送</div>
                  <div v-else-if="data.logisticsCode == 4">外卖平台众包</div>
                  <div v-else>{{ data.logisticsCode }}</div>
                </li>
                <li>
                  <span>配送员姓名</span>
                  <div>{{data.shipperName}}</div>
                </li>
                <li>
                  <span>配送员电话</span>
                  <div>{{data.shipperPhone}}</div>
                </li>
              </ul>
            </div>
            <div class="section">
              <div class="title" @click="handleToggleFold">
                <span>结算金额</span>
                <div>
                  <span>{{ CommonUtil.moneyFormate(data.liquidationAmt) }}元</span>
                  <i class="zhk-list_rarrow" :class="{unfold:jsjeVisible}"></i>
                </div>
              </div>
              <ul class="order-list" v-show="jsjeVisible">
                <li>
                  <span>手续费</span>
                  <div>{{ CommonUtil.moneyFormate(data.tradeOrderExtModel.serviceCharge,true) }}</div>
                </li>
                <li v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.joinMarketing===1&&data.tradeOrderExtModel['miniStoreValueType']!==4">
                  <span>津贴发放</span>
                  <div>{{ CommonUtil.moneyFormate(data.subsidyOut,true) }}</div>
                </li>
                <li v-if="data.tradeOrderExtModel&&data.tradeOrderExtModel.joinMarketing===1">
                  <span>服务费</span>
                  <div>{{ CommonUtil.moneyFormate(data.serviceOut,true) }}</div>
                </li>
              </ul>
            </div>
            <div
              class="section-title"
              v-if="data.refundList&&data.refundList.length !==0&&(data.refundStatus==2||data.refundStatus==3)"
              @click="handleToggle"
            >
              <span>
                退款详情
                <div>{{data.refundList[0].tradeTime}}</div>
              </span>
              <div>
                <span
                  class="status-orange"
                >{{CommonUtil.moneyFormate(data.totalRefundAmount,true)}}元</span>
                <i class="zhk-list_rarrow"></i>
              </div>
            </div>
          </div>
        </v-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox, Loadmore } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import jsAuthority from "../../tools/jsAuthority.js";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);
export default {
  name: "orderDetails",
  data() {
    return {
//       /** 从会员储值需求开始使用：用于会员储值相关标识 1：该订单是会员储值订单，2：该订单是跟储值订单绑定在一起的余额抵扣订单，3：该订单包含普通余额抵扣，4：该订单是购买商品券的订单 */
//     private Integer miniStoreValueType;
//     /** 会员储值抵扣金额 */
//     private BigDecimal storeValueDeductionAmount;
// /** 储值余额实退金额 */
//  private BigDecimal storeValueRefundAmount;
      CommonUtil:CommonUtil,
      hasData: false,
      isRefundDetail: false,//是否为退款详情
      jsjeVisible: false,
      method: "",
      param: "",
      authRefund: false,
      data: {
        orderType: "",
        supplierReceiveAmount: "",
        totalAmount: "",
        packingAmount: "",
        totalPayAmount: "",
        serviceAmount: "",
        otherAmount: "",
        cancellationAmount: "",
        discountAmount: "",
        molingAmount: "",
        tableNum: "",
        takeFoodNum: "",
        goodsDetailList: [],
        recipientName: "",
        recipientPhone: "",
        remark: "",
        personNum: "",
        dinnerType: "",
        serviceBeginText: "",
        memberMobile: "",
        remark: "",
        orderId: "",
        billNo: "",
        bizNo: "",
        newOrderStatus: "",
        payType: "",
        createTimeText: "",
        operatorName: "",
        orderPlatformSource: "",
        invoiceStatus: "",
        invoiceTitle: "",
        taxpayerId: "",
        logisticsCode: "",
        shipperName: "",
        shipperPhone: "",
        hasInvoiced: "",
        refundList: [],
        refundStatus: "",//(0,"未发生退款"),(1, "退款中"),(2, "已全部退款"),(3, "已部分退款"),(4,"退款失败"),(5,"已退款");
        detailModelMap: {}
      },
      topStatus: "",
      modalVisible: false
    };
  },
  methods: {
    doCopyOrderId() {
      this.doCopy(this.data.orderId);
    },
    doCopyBizNo() {
      this.doCopy(this.data.bizNo);
    },
    doCopyThirdTradeNo() {
      this.doCopy(this.data.thirdTradeNo);
    },
    doCopy(content) {
      if(!content){
        return;
      }
      this.$copyText(content).then(
        e => {
          Toast("复制成功");
        },
        e => {
          Toast("您的系统版本过低,请长按手动复制");
        }
      );
    },
    goodsOrderStatus(status){
      let v="未知";
      if(status==1){
        v="待支付";
      }
      else if(status==2){
        v="待消费";
      }
      else if(status==3){
        v="已完成";
      }
      else if(status==4){
        v="已退款";
      }
      else if(status==5){
        v="已关闭";
      }
      return v;
    },
    handleToggle() {
      setTimeout(() => {
        this.isRefundDetail = !this.isRefundDetail;
      }, 100);
    },
    handleToggleFold() {
      setTimeout(() => {
        this.jsjeVisible = !this.jsjeVisible;
      }, 100);
    },
    getRefundAuthority() {
      jsAuthority.checkedSuccess(() => {
        this.authRefund = jsAuthority.checked(
          "app.order.refund"
        );
      });
    },
    payTypeFormate(payType) {
      let v = "" + payType;
      if (payType == 1) {
        v = "现金";
      } else if (payType == 2) {
        v = "支付宝";
      } else if (payType == 3) {
        v = "会员卡";
      } else if (payType == 4) {
        v = "POS刷卡";
      } else if (payType == 5) {
        v = "微信";
      } else if (payType == 8) {
        v = "余额支付";
      } else if (payType == 7) {
        v = "云闪付";
      }
      return v;
    },
    handleClickTitle(e) {
      if (e.target.className.indexOf("title") !== -1) {
        if (e.target.className.indexOf("fold") == -1) {
          e.target.className = "title fold";
        } else {
          e.target.className = "title";
        }
      } else if (e.target.className.indexOf("zhk-list_rarrow") !== -1) {
        if (e.target.parentElement.className.indexOf("title") !== -1) {
          if (e.target.parentElement.className.indexOf("fold") == -1) {
            e.target.parentElement.className = "title fold";
          } else {
            e.target.parentElement.className = "title";
          }
        }
      }
    },
    getOrderDetail() {
      //let url=`app/order/getOrderDetail.do?orderId=${this.param.orderId}&orderType=${this.param.orderType}`;
      let url = `/newapp/order/getTradeOrderDetailNew.do?orderId=${this.param.orderId}&orderType=${this.param.orderType}`;
      if (this.param['clientOrderId']) {
        //扫码进来的
        url = `newapp/order/getOrderDetailByClientOrderId.do?clientOrderId=${this.param.clientOrderId}&shopId=${this.param.shopId}`;
      }
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            if (res.resultObject) {
              res.resultObject.refundList = res.resultObject.refundList || [];
              _.assignWith(this.data, res.resultObject);
              this.data.newOrderStatus = res.resultObject.orderStatus;
              this.hasData = true;
              this.getRefundAuthority();
            } else {
              Toast(res.msg);
            }
          } else {
            Toast(res.msg);
          }
          this.$refs.loadmore && this.$refs.loadmore.onTopLoaded && this.$refs.loadmore.onTopLoaded();
        })
        .catch(err => {
          Toast(err);
          this.$refs.loadmore && this.$refs.loadmore.onTopLoaded && this.$refs.loadmore.onTopLoaded();
        });
    },
    //app能否退款
    handleRefund() {
      // if (
      //   this.data.refundStatus != "1" &&
      //   this.data.refundStatus != "2" &&
      //   this.data.refundStatus != "3"
      // ) {
      //   this.$router.push({
      //     path: "/orderDetails/refund",
      //     query: {
      //       payType: this.data.payType,
      //       orderId: this.data.orderId,
      //       orderType: this.data.orderType,
      //       shopId: this.data.shopId,
      //       totalAmount: this.data.totalAmount,
      //     }
      //   });
      // }
      const param = {
        orderId: this.data.orderId
      };
      this.ajax({
        url: "/app/order/isAppCanRefund.do",
        type: "post",
        data: param,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            this.$router.push({
              path: "/orderDetails/refund",
              query: {
                payType: this.data.payType,
                orderId: this.data.orderId,
                orderType: this.data.orderType,
                shopId: this.data.shopId,
                totalAmount: this.data.totalAmount,
                extension31: this.data.tradeOrderExtModel.extension31,
              }
            });
          } else {
            MessageBox({
              title: "",
              message: res.msg,
              showCancelButton: false,
              confirmButtonText: "知道了",
              closeOnClickModal: false
            })
          }
        })
        .catch(function (err) {

        });
    },
    handleBack() {
      jsBridge.closeWindow();
    },
    //下拉刷新
    loadTop() {
      this.getOrderDetail();
    },
    handleTopChange(status) {
      this.topStatus = status;
    },
  },
  components: {
    customHeader,
    "v-loadmore": Loadmore
  },
  mounted() {
    this.param = this.$route.query;
    //detailType  1:订单 2:流水
    //tradeType 流水类型 0：收款，1：退款
    if (this.param.detailType == "2" && this.param.tradeType == "1") {
      this.isRefundDetail = true;
    } else if (this.param.detailType == "1" && this.param.orderStatus == "2") {
      this.isRefundDetail = true;
    } else {
      this.isRefundDetail = false;
    }

    this.getOrderDetail();
  }
};
</script>
<style lang='scss' scoped>
@import "orderDetails";
</style>
